<template>
  <div class="home" style="height: 100%">
    <el-container>
      <!--头部-->
      <el-header>
        <div>
          <img src="~assets/apple.png" alt="">
          <span>苹果后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
      </el-header>
      <el-container>
        <!--侧边栏-->
        <el-aside :width="!isCollapse? '200px': '64px'">
          <!--折叠面板-->
          <el-button type="text" class="toggleCollapseBtn" :title="!isCollapse? '收起': '展开'" @click="toggleCollapse">
            <i :class="!isCollapse? 'el-icon-d-arrow-left': 'el-icon-d-arrow-right'"></i>
          </el-button>
          <el-menu background-color="#333642"
                   text-color="#fff"
                   active-text-color="#ffd04b"
                   :default-active="activePath"
                   :collapse="isCollapse"
                   router
                   unique-opened
                   :collapse-transition="false">
            <!--一级菜单-->
            <el-submenu v-for="item in menuList" :index="item.id + ''" :key="item.id">
              <template slot="title">
                <i :class="iconObj[item.id]"></i>
                <span>{{item.authName}}</span>
              </template>
              <!--二级菜单-->
              <el-menu-item v-for="subItem in item.children"
                            :index="'/' +subItem.path"
                            :key="subItem.id"
                            @click="saveActivePath(subItem.path)">
                <template slot="title">
                  <i :class="iconObj[subItem.id]"></i>
                  <span>{{subItem.authName}}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--主视区-->
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {getMenuListData} from "network/home";

  export default {
    name: 'Home',
    data() {
      return {
        menuList: [],
        iconObj: {
          '125': 'el-icon-s-custom',
          '110': 'el-icon-notebook-2',
          '111': 'el-icon-notebook-2',
          '112': 'el-icon-notebook-2',
          '104': 'el-icon-notebook-2',
          '107': 'el-icon-notebook-2',
          '146': 'el-icon-notebook-2',
          '103': 'el-icon-s-check',
          '101': 'el-icon-s-goods',
          '115': 'el-icon-s-data',
          '121': 'el-icon-folder-opened',
          '102': 'el-icon-menu',
          '145': 'el-icon-s-grid',
        },
        activePath: '',
        isCollapse: false
      }
    },
    created() {
      this.getMenuList()
      this.activePath = this.getActivePath()
    },
    methods: {
      /*登出*/
      logout() {
        //移除session中的tokenId，并跳转至login
        sessionStorage.removeItem('token')
        this.$router.push('/login')
      },
      //获取menuList数据
      async getMenuList() {
        const {data: res} = await getMenuListData()
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.menuList = res.data
        // console.log(res);
      },
      saveActivePath(id) {
        sessionStorage.removeItem('activePath')
        sessionStorage.setItem('activePath', id)
      },
      getActivePath() {
        const activePath = sessionStorage.getItem("activePath")
        return activePath ? '/' + activePath : '/users'
      },
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      }

    }
  }
</script>

<style lang="less" scoped>
  .el-header {
    background-color: #111111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    > div {
      display: flex;
      align-items: center;
      
      img {
        width: 60px;
      }
      
      span {
        margin-left: 10px;
      }
    }
  }
  
  
  .el-container {
    height: 100%;
  }
  
  .el-aside {
    position: relative;
    background-color: #333642;
    color: #fff;
    font-size: 15px;
    letter-spacing: .1rem;
    overflow: visible;
    
    > .toggleCollapseBtn i{
      width: 20px;
      position: absolute;
      top: 46%;
      right: -17px;
      color: #333642;
      font-size: 17px;
      font-weight: 800;
    }
    
    .el-menu {
      border-right: none;
    }
    
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    
  }
</style>